<template>
  <div>
    <van-tabs  scrollspy sticky 
    background="transparent"
    title-active-color='#fff'
    title-inactive-color='#fff'
    line-height='0px'>
        <van-tab v-for="item in mainList" :key="item.name">
            <template #title>
                <span :class="['iconfont',item.icon]"></span>
                <span>{{item.name}}</span>
            </template>
  </van-tab>
</van-tabs>

  </div>
</template>
<script setup>
import { reactive } from "vue";

const mainList = reactive([
  { name: "每日推荐", icon: "icon-rili", href: "" },
  { name: "私人FM", icon: "icon-18_shouyinji", href: "" },
  { name: "歌单", icon: "icon-gedan", href: "" },
  { name: "排行榜", icon: "icon-shuzhuangtu", href: "" },
  { name: "数字专辑", icon: "icon-xunicidaiku", href: "" },
  { name: "助眠解压", icon: "icon-shuimian", href: "" },
  { name: "歌房", icon: "icon-huatong", href: "" },
  { name: "游戏专区", icon: "icon-youxi", href: "" },
]);
</script>
<style lang="less" scoped>
.iconfont{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    font-size: 30px;
    color:red;
    background-color: #ef7e7e52;

};
:deep(.van-tabs__wrap){
    height: 80px;
    .van-tab{
        .van-tab__text{
            display: flex;
            flex-direction: column;
            align-content: center;
            span{
                text-align: center;
            }
        }
    }
    
}
:deep(.van-sticky){
      border-bottom: .1px solid gray;
    }
    

</style>>